const { useState, useEffect } = React;
const { Button, Space, Input, Tag, List, Typography, message, Modal, Form, Table } = antd;


const PromptList = ({ prompts, onEdit, onOptEdit, onDelete }) => {
  const [selectedTags, setSelectedTags] = useState([]);

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Content',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: 'Tags',
      dataIndex: 'tags',
      key: 'tags',
      render: tags => tags.map(tag => <Tag key={tag}>{tag}</Tag>)
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button onClick={() => onEdit(record)}>Edit</Button>
          <Button onClick={() => onOptEdit(record)}>EditOpt</Button>
          <Button danger onClick={() => onDelete(record.id)}>Delete</Button>
        </Space>
      )
    }
  ];

  return (
    <>
      <div style={{ marginBottom: 16 }}>
        <Select
          mode="multiple"
          placeholder="Filter by tags"
          value={selectedTags}
          onChange={setSelectedTags}
          style={{ width: 300 }}
          options={[...new Set(prompts.flatMap(p => p.tags))].map(tag => ({
            value: tag,
            label: tag
          }))}
        />
      </div>
      <Table
        dataSource={prompts.filter(p => 
          selectedTags.length === 0 || 
          selectedTags.every(tag => p.tags.includes(tag))
        )}
        columns={columns}
        rowKey="id"
      />
    </>
  );
};
